<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body onload="showProList()">
    请选择住址:<select id="pro" onchange="showCityList()">
      <option value="">--请选择省份--</option>
    </select>
    <select id="city">
      <option value="">--请选择城市--</option>
    </select>
  </body>
</html>
<script>
  var addressAy = [
    {
      proId: 'p1',
      proName: '安徽省',
      cityList: [
        { cityId: 'c1', cityName: '合肥' },
        { cityId: 'c2', cityName: '芜湖' },
      ],
    },
    {
      proId: 'p2',
      proName: '江苏省',
      cityList: [
        { cityId: 'c3', cityName: '南京' },
        { cityId: 'c4', cityName: '苏州' },
        { cityId: 'c5', cityName: '常州' },
      ],
    },
    {
      proId: 'p3',
      proName: '浙江省',
      cityList: [
        { cityId: 'c6', cityName: '杭州' },
        { cityId: 'c7', cityName: '嘉兴' },
      ],
    },
  ]
  //显示所有的省份
  function showProList() {
    var selectComp = document.getElementById("pro")
    for(var i=0;i<addressAy.length;i++){
      //创建 <option>  param1 text  param2 value
      var option = new Option(addressAy[i].proName,addressAy[i].proId)
      console.log("id:"+addressAy[i].proId+",名:"+addressAy[i].proName)
      selectComp.add(option)
    }
  }

  //显示当前被选中省份下 所有的城市
  function showCityList() {
    document.getElementById("city").length = 1
    // 被选中索引
    var selectedIdx = document.getElementById('pro').selectedIndex
    //判断 选中的是提示信息  --请选择省份--
    if(selectedIdx==0){
      return
    }
    var cityAy = addressAy[selectedIdx-1].cityList
    console.log('===============被选中的option的索引:' + selectedIdx)
    console.log('===============要显示城市数组:' + cityAy)
    // 提示：xx数组 ...
    var selectComp = document.getElementById("city")
    for(var i=0;i<cityAy.length;i++){
      //创建 <option>  param1 text  param2 value
      var option = new Option(cityAy[i].cityName,cityAy[i].cityId)
      console.log("id:"+cityAy[i].cityId+",名:"+cityAy[i].cityName)
      selectComp.add(option)
    }
  }
</script>
